<template>
  <div>
    <div class="head">
      <p class="text">详细信息</p>
      <van-icon
        @click="onClickLeft()"
        size="20"
        color="whitesmoke"
        name="arrow-left"
        class="icon"
      />
    </div>
    <br />
    <div class="show_head" v-for="(item, index) in list" :key="index">
      <van-image
        class="show_img1"
        radius="10"
        width="100"
        height="100"
        :src="item.appIcon.app_image_road ? item.appIcon.app_image_road : ''"
      />
      <span class="show_text">{{ item.app_name }}</span>
      <span class="show_sp1">{{ item.versions_number }}</span>
      <span class="show_sp2">{{ item.app_downloding_times }}下载</span>
      <van-button
        class="show_btn1"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
      >
        下载({{ item.app_size }})
      </van-button>
      <el-rate
        class="show_score"
        :max="5"
        :allow-half="true"
        :value="item.app_score / 2"
        disabled
        disabled-void-color="#D5D4D3"
        text-color="#F3780C"
      >
      </el-rate>
      <span class="show_sp3">{{ item.app_score }}.0</span>
      <br />
      <br />
      <div v-if="item.app_image_list&&item.app_image_list.length>1">
        <van-image
          class="img_details"
          v-for="(item1, index) in item.app_image_list"
          :key="index"
          radius="10"
          width="10rem"
          height="20rem"
          :src="item1.app_image_road ? item1.app_image_road:''"
        />
      </div>
      <!-- 基本信息 -->
      <div>
        <p class="show_p1">详细信息</p>
        <p class="show_p2">1.{{ item.app_edition }}</p>
        <p class="show_p2">2.{{ item.app_presentation }}</p>
      </div>
      <van-sticky :offset-top="50">
        <van-tabs>
          <van-tab title="讨论">
            <div
              class="heart_banner2"
              v-for="(item, index) in talkList"
              :key="index"
              
            >
              <div class="con1">
                <van-image
                  round
                  width="4rem"
                  height="4rem"
                  :src="item.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <div class="toutiaoUserName">{{ item.user_name }}</div>
                <div class="toutiaoTime">{{ item.review_date }}</div>
                <div class="toutiaoText">{{ item.review_text }}</div>
              </div>
            </div>
            <div class="foot"></div>
          </van-tab>
          <van-tab title="点评">
            <div
              class="heart_banner2"
              v-for="(item, index) in commenList"
              :key="index"
              
            >
              <div class="con1">
                <van-image
                  round
                  width="4rem"
                  height="4rem"
                  :src="item.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <div class="toutiaoUserName">{{ item.user_name }}</div>
                <div class="toutiaoTime">{{ item.review_date }}</div>
                <div class="toutiaoText">{{ item.review_text }}</div>
              </div>
            </div>
            <div class="foot"></div>
          </van-tab>
        </van-tabs>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      list: [],
      value: 9.5,
      show: true,
      commenList:[],
      talkList:[],
      routeFrom:''
    };
  },
  mounted() {
    //点评
      http.getCommend({
        review_public_id: this.$route.params.id,
      }).then((r) => {
        console.log(r);
        this.commenList = r.data;
      });
      // 讨论
      http.getTalkings({
        discuss_type:0,
        discuss_public_id:parseInt(this.$route.params.id)
      }).then((r) => {
        console.log(r);
        this.talkList = r.data;
      });
      console.log(this.$route.params.id);
    http
      .getSoftDetails({
        app_id: this.$route.params.id,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
      });
  },
  beforeRouteEnter(to, from, next) {
    // 官方解释在此无法获取组件的this，还没创建
    // 可以使用next函数的回调，可以获取创建之前的组件实例
    next(function (vm) {
      // vm就是当前组件的实例，把从哪来的路径赋值给当前组件中的变量
      vm.routeFrom = from.path;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push('/softGame');
    },
  },
};
</script>
<style scoped>
.foot{
  width: 100%;
  height: 4rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 1.4rem;
  opacity: 0.75;
  line-height: 15rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.toutiaoUserName {
  display: inline-block;
  position: relative;
  top: -3rem;
  font-size: 1.5rem;
  margin-left: 0rem;
  margin-top: -5rem;
}
.toutiaoText {
  font-size: 1.5rem;
  display: inline-block;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: clip; /* 修剪文本 */
  display: -webkit-box; /* 弹性布局 */
  -webkit-box-orient: vertical; /* 从上向下垂直排列子元素 */
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
.toutiaoTime {
  font-size: 1rem;
  margin-left: 4.3rem;
  margin-top: -2.5rem;
  color: gray;
}
.toutiaoUserImg {
  display: inline-block;
}
.textImg {
  display: inline-block;
  margin-left: 2rem;
  margin-top: 2rem;
}
.icon {
  padding-left: 2rem;
}
.discuss {
  font-size: 1.5rem;
  color: gray;
  position: relative;
  top: -0.1rem;
}
.heart_banner2 {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1.5rem;
  background-color: white;
  /* margin-bottom: 1.5rem; */
  padding: 1rem;
  margin-top: 1.5rem;
}
.toutiaoUserImg {
  display: inline-block;
}
.slider {
  width: 100%;
  height: auto;
}
.slider1 {
  width: 40%;
  height: auto;
}
.head {
  width: 100%;
  height: 4rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgb(108, 144, 243);
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.icon {
  position: absolute;
  top: 1.1rem;
  /* left: 0px; */
}
.show_head {
  width: 100%;
  /* height: 58rem; */
  border-radius: 1rem;
  background-color: white;
  position: relative;
}
.show_img1 {
  margin-left: 1rem;
  margin-top: 1rem;
}
.show_text {
  position: absolute;
  left: 12.2rem;
  top: 1.1rem;
  font-size: 2rem;
}
.show_sp1 {
  position: absolute;
  top: 4.6rem;
  left: 12.2rem;
}
.show_sp2 {
  position: absolute;
  top: 4.4rem;
  left: 15.2rem;
}
.show_sp4 {
  position: absolute;
  top: 4.6rem;
  left: 19.2rem;
}
.show_btn1 {
  width: 11rem;
  height: 3rem;
  position: absolute;
  top: 6.8rem;
  left: 12rem;
}
.show_score {
  position: absolute;
  top: 8rem;
  left: 25.4rem;
}
.show_icon1 {
  position: absolute;
  top: 11.1rem;
  left: 12rem;
}
.show_sp3 {
  position: absolute;
  top: 2.6rem;
  left: 28.6rem;
  color: rgb(180, 122, 34);
  font-size: 3.6rem;
}
.show_cell {
  width: 3rem;
}
.show_swipe {
  position: absolute;
  top: 14.3rem;
  left: 0.9rem;
}
.img_details {
  margin-left: 1rem;
  border: 1px solid #cccccc;
}
.show_p1 {
  margin-left: 2rem;
  margin-top: 2rem;
  font-size: 2rem;
  color: #3c1ec5;
}
.show_p2 {
  margin-left: 2rem;
  margin-top: 0.5rem;
  font-size: 1.6rem;
  color: #4c4c4d;
}
</style>